<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <title>生成订单</title>
    <link rel="stylesheet" type="text/css" href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/proList.css" />
    <link rel="stylesheet" type="text/css" href="css/mygxin.css" />
    <link rel="stylesheet" href="../js/layui-v2.2.5/css/layui.css" media="all">
    <script src="../js/layui-v2.2.5/layui.js" charset="utf-8"></script>
    <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/pro.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/user.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-3.3.1.min.js	"></script>
    <script src="js/vue.min.js"></script>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<!----------------------------------------order------------------>
<div class="head">
    <div class="wrapper clearfix">
        <div class="clearfix" id="top">
            <h1 class="fl"><a href="index.html"><img src="../images/logo.png" style="margin-top: -20px;"/></a></h1>
            <div class="fr clearfix" id="top1">
                <p class="fl">
                    <a href="../login.html" id="login">登录</a>
                    <a href="../reg.html" id="reg">注册</a>
                </p>
                <form action="#" method="get" class="fl">
                    <input type="text" placeholder="搜索" id="sousuo"/>
                    <a onclick="findBookByName()"><img src="images/ss.png" /></a>
                </form>
                <div class="btn fl clearfix">
                    <a href="myinfo/mygxin.html"><img src="images/grzx.png" /></a>
                    <a href="myinfo/start.html"><img src="images/collection.png" /></a>
                </div>
            </div>
        </div>
        <ul class="clearfix" id="bott">
            <li><a href="index.html">首页</a></li>
            <li>
                <a onclick="findByBookCategory(this)">考试教育</a>
                <div class="sList2">
                    <div class="clearfix">
                        <a onclick="findByBookCategory(this)">公务员考试</a>
                        <a onclick="findByBookCategory(this)">英语考试</a>
                        <a onclick="findByBookCategory(this)">考研</a>
                        <a onclick="findByBookCategory(this)">其他考试</a>
                        <a onclick="findByBookCategory(this)">职称考试</a>
                        <a onclick="findByBookCategory(this)">教辅书</a>
                        <a onclick="findByBookCategory(this)">工具书</a>
                    </div>
                </div>
            </li>
            <li>
                <a onclick="findByBookCategory(this)">经济管理</a>
                <div class="sList2">
                    <div class="clearfix">
                        <a onclick="findByBookCategory(this)">成功励志</a>
                        <a onclick="findByBookCategory(this)">管理</a>
                        <a onclick="findByBookCategory(this)">经济金融</a>
                    </div>
                </div>
            </li>
            <li>
                <a onclick="findByBookCategory(this)">文学艺术</a>
                <div class="sList2">
                    <div class="clearfix">
                        <a onclick="findByBookCategory(this)">收藏鉴赏</a>
                        <a onclick="findByBookCategory(this)">艺术</a>
                        <a onclick="findByBookCategory(this)">文学小说</a>
                        <a onclick="findByBookCategory(this)">文化历史</a>
                    </div>
                </div>
            </li>
            <li>
                <a onclick="findByBookCategory(this)">人文社科</a>
                <div class="sList2">
                    <div class="clearfix">
                        <a onclick="findByBookCategory(this)">新闻传播</a>
                        <a onclick="findByBookCategory(this)">心理</a>
                        <a onclick="findByBookCategory(this)">法律</a>
                        <a onclick="findByBookCategory(this)">自然科学</a>
                        <a onclick="findByBookCategory(this)">社会科学</a>
                        <a onclick="findByBookCategory(this)">政治军事</a>
                        <a onclick="findByBookCategory(this)">宗教哲学</a>
                        <a onclick="findByBookCategory(this)">语言学习</a>
                    </div>
                </div>
            </li>
            <li>
                <a onclick="findByBookCategory(this)">科学技术</a>
                <div class="sList2">
                    <div class="clearfix">
                        <a onclick="findByBookCategory(this)">汽车与交通运输</a>
                        <a onclick="findByBookCategory(this)">医学卫生</a>
                        <a onclick="findByBookCategory(this)">计算机与网络</a>
                        <a onclick="findByBookCategory(this)">科技工程</a>
                        <a onclick="findByBookCategory(this)">建筑</a>
                    </div>
                </div>
            </li>
            <li>
                <a onclick="findByBookCategory(this)">生活休闲</a>
                <div class="sList2">
                    <div class="clearfix">
                        <a onclick="findByBookCategory(this)">生活时尚</a>
                        <a onclick="findByBookCategory(this)">家庭育儿</a>
                        <a onclick="findByBookCategory(this)">旅游地理</a>
                        <a onclick="findByBookCategory(this)">体育保健</a>
                        <a onclick="findByBookCategory(this)">少儿</a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="order cart mt">
    <!-----------------site------------------->
    <div class="site">
        <p class="wrapper clearfix">
            <span class="fl">订单确认</span>
            <img class="top" src="images/cartTop02.png">
        </p>
    </div>
    <!-----------------orderCon------------------->
    <div class="orderCon wrapper clearfix" id="app">
        <div class="orderL fl">
            <!--------h3---------------->
            <h3>收件信息<a href="#" class="fr" @click="addplace()">新增地址</a></h3>
            <!--------addres---------------->
            <div class="addres clearfix">
                <div class="addre fl" :id="item.receiveId" v-for = "item,index in datalist" @click="border(item.receiveId)" >
                    <div class="tit clearfix">
                        <p class="fl">{{item.receiverName}}
                            <!--<span v-if="item.isDefault == 1" class="default">[默认地址]</span>-->
                        </p>
                        <p class="fr">
                            <a href="#" @click="del(index)">删除</a>
                            <span>|</span>
                            <a href="#" class="edit" @click="editaddr(index)">编辑</a>
                        </p>
                    </div>
                    <div class="addCon">
                        <p>{{item.placeName}}</p>
                        <p>{{item.receiverTel}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="orderR fr">
            <div class="msg">
                <h3>订单内容<a href="#" class="fr" onclick="javascript :window.history.back()">返回购物</a></h3>
                <!--------ul---------------->
                <ul class="clearfix">
                    <li class="fl">
                        <img :src="book.bookPicture" style="height: 128px;width: 128px">
                    </li>
                    <li class="fl">
                        <p>{{book.bookName}}</p>
                    </li>
                    <li class="fl">￥{{book.bookPrice}}</li>
                </ul>
            </div>
            <!--<p class="cart fl" onclick="remark()">备注</p>
            <div id="remark">
                <textarea id="demo" style="display: none"></textarea>
            </div>-->
            <div style="height: 40px"></div>
            <a href="myinfo/ok.html" class="pay" @click="pay()">生成订单</a>
        </div>
    </div>
    <div style="height: 150px"></div>
</div>
<!--编辑弹框-->
<!--遮罩-->
<div class="mask"></div>
<!--添加地址-->
<div class="adddz" id="addplace">
    <form  class="layui-form">
        <input type="text" placeholder="姓名" class="on" v-model="address.receiverName" required/><span id="addrname" style="display: none;color: red">用户名必须填写</span>
        <input type="text" placeholder="手机号" id="tel" v-model="address.receiverTel" required/><span id="addrtel" style="display: none;color: red">电话不可为空</span>
        <div class="city">
            <select id="adressname" v-model="address.placeName" required>
                <option :value="item.placeName" :id="item.placeTransactionId"  v-for="item in place">{{item.placeName}}</option>
                <!--<option value="省份/自治区">荷园</option>-->
                <!--<option value="省份/自治区">松原</option>-->
            </select>
        </div>
        <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">设为默认地址</label>-->
        <!--<div class="layui-input-block">-->
        <!--<input type="checkbox" name="close" lay-filter="switchTest" lay-skin="switch" lay-text="ON|OFF">-->
        <!--</div>-->
        <!--</div>-->
        <div class="bc">
            <input type="button" value="添加" @click="add()"/>
            <input type="button" value="取消" @click="close"/>
        </div>
    </form>
</div>
<!--编辑地址-->
<div class="readd" id="editaddr">
    <form class="layui-form">
        <input type="text" class="on" value="六六六" v-model="address.receiverName" required/><span id="addrname" style="display: none;color: red">用户名必须填写</span>
        <input type="text" value="157****0022" v-model="address.receiverTel" required/><span id="addrtel" style="display: none;color: red">电话不可为空</span>
        <div class="city">
            <select v-model="address.placeName">
                <option :value="item.placeName" :id="item.placeTransactionId"  v-for="item in place">{{item.placeName}}</option>
                <!--<option value="省份/自治区">荷园</option>-->
                <!--<option value="省份/自治区">松原</option>-->
            </select>
        </div>
        <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label" style="width: 120px;margin-left: -10px" >设为默认地址</label>-->
        <!--<div class="layui-input-block">-->
        <!--<input type="checkbox" id="isDefault" name="close" lay-filter="switchTest" lay-skin="switch" lay-text="ON|OFF">-->
        <!--</div>-->
        <!--</div>-->
        <div class="bc">
            <input type="button" value="保存" @click="save()"/>
            <input type="button" value="取消" @click="close()"/>
        </div>
    </form>
</div>
<!--右下角导航栏返回顶部-->
<div class="gotop">
    <a onclick="mystart()">
        <dl>
            <dt><img src="images/collection.png"/></dt>
            <dd>我的<br />收藏</dd>
        </dl>
    </a>
    <a onclick="mysell()" class="dh">
        <dl>
            <dt><img src="images/addbook.png"/></dt>
            <dd>发布<br />图书</dd>
        </dl>
    </a>
    <a onclick="myinfo()">
        <dl>
            <dt><img src="images/gt3.png"/></dt>
            <dd>个人<br />中心</dd>
        </dl>
    </a>
    <a href="#" class="toptop" style="display: none">
        <dl>
            <dt><img src="images/gt4.png"/></dt>
            <dd>返回<br />顶部</dd>
        </dl>
    </a>
</div>
<!--footer-->
<div class="footer">
    <div style="margin-top: 30px;"></div>
    <p class="dibu">科院书城&copy;2019公司版权所有<br/> 本网站所列数据，除特殊说明，所有数据均为测试数据
    </p>
</div>
<script>
    function findBookByName() {
        localStorage.setItem("search",$("#sousuo").val());
        console.log(localStorage.getItem("search"));
        window.location.href = "search.html";
    }
    function findByBookCategory(v) {
        console.log($(v).text());
        localStorage.setItem("bookCategory",$(v).text());
        console.log(localStorage.getItem("bookCategory"));
        window.location.href = "categorybook.html"
    }
    function myinfo() {
        if (localStorage.getItem("userName") !== null) {
            window.location.href = "myinfo/mygxin.html";
        } else {
            alert("您还没有登录")
            window.location.href = "login.html";
        }
    }
    function mysell() {
        if (localStorage.getItem("userName") !== null) {
            window.location.href = "myinfo/sellbook.html";
        } else {
            alert("您还没有登录")
            window.location.href = "login.html";
        }
    }
    function mystart() {
        if (localStorage.getItem("userName") !== null) {
            window.location.href = "myinfo/start.html";
        } else {
            alert("您还没有登录")
            window.location.href = "login.html";
        }
    }
</script>
<script>
    $(".add").click(function(){
        $(".mask").show();
        $(".adddz").show();
    });
    layui.use(['form'], function(){
        var form = layui.form
    })
    $(function(){
        $.ajax({
            url:"getreceiveadress",
            type:"get",
            async: false,//使用同步的方式,true为异步方式
            data:{
                userName:localStorage.getItem("userName")
            },
            success:function(data){
                v.datalist = data.data;
            },
            fail:function(){
                alert(error);
            }
        })
        $.ajax({
            url:"detail",
            type:"get",
            async: false,//使用同步的方式,true为异步方式
            data:{
                bookId:localStorage.getItem("bookId")//localStorage.getItem("userName")
            },
            success:function(data){
                v.book = data.data;
            },
            fail:function(){
                alert(error);
            }
        })
    })
    function findPlace(){
        $.ajax({
            url:"/placelist",
            type:"get",
            async: false,//使用同步的方式,true为异步方式
            data:{
            },
            success:function(data){
                addplace.place = data.data;
                editdz.place = data.data;
            },
            fail:function(){
                alert(error);
            }
        })
    }
    function leaveWords() {
        layui.use('layedit', function(){
            var layedit = layui.layedit;
            index = layedit.build('demo',{
                height: 230 //设置编辑器高度
            }); //建立编辑器
        });
        $('#remark').show();
        $('#say').css('display','block');
    }

    var v = new Vue({
        el: "#app",
        data: {
            datalist: [],
            book:[]
        },
        methods: {
            del:function (index) {
                var msg= confirm("您真的要删除吗！");
                if(msg){
                    $.ajax({
                        url:"/deleteaddress",
                        type:"delete",
                        async: false,//使用同步的方式,true为异步方式
                        data:{
                            id:this.datalist[index].receiveId,//localStorage.getItem("userName")
                        },
                        success:function(data){
                            window.location.reload()
                        },
                        fail:function(){
                            alert(error);
                        }
                    })
                }

            },
            editaddr:function (index) {
                findPlace();
                setTimeout(function () {
                    layui.form.render();//延迟重新渲染
                },10);
                $(".mask").show();
                $(".readd").show();
                editdz.address = this.datalist[index];
                editdz.addrid = this.datalist[index].receiveId;

            },
            addplace:function () {
                findPlace();
                setTimeout(function () {
                    layui.form.render();//延迟重新渲染
                },10);
                console.log(addplace.place)
                $(".mask").show();
                $(".adddz").show();
            },
            border:function (id) {
                $("#"+id).attr("class", "addre fl on");
                localStorage.setItem("addressId",id);
            },
//            leave:function (id) {
//                $("#"+id).attr("class", "addre fl");
//            },
            pay:function () {
                var bookId = localStorage.getItem("bookId");
                var userName = localStorage.getItem("userName");
                var addrId = localStorage.getItem("addressId");
                var remark ;
//                layui.use('layedit', function(index){
//                    var layedit = layui.layedit;
//                    remark = layedit.getText(index)
//                });
                console.log("jidhfaidhgsk")
                $.ajax({
                    url:"/addorder",
                    type:"post",
                    async: false,//使用同步的方式,true为异步方式
                    data:{
                        bookId:bookId,
                        userName:localStorage.getItem("userName"),//localStorage.getItem("userName")
                        addressId:addrId,
//                        remark:remark
                    },
                    success:function(data){
                    },
                    fail:function(){
                        alert(error);
                    }
                })
                console.log("bookId:"+bookId+"addrId:"+addrId)
            }
        }
    });
    //新增地址
    var addplace = new Vue({
        el:"#addplace",
        data:{
            place:[],
            address:[]
        },
        methods:{
            add:function () {
                this.address.placeName=$("select option:checked").text();
                console.log(this.address)
                if(this.address.receiverName==null||this.address.receiverName.length==0){
                    $("#addrname").show();
                }else {
                    $("#addrname").hide();
                }
                if(this.address.receiverTel==null||this.address.receiverTel.length==0){
                    $("#addrtel").show();
                }else{
                    $("#addrtel").hide();
                }
                if((this.address.receiverName!=null||this.address.receiverName.length!=0)&&
                    (this.address.receiverTel!=null||this.address.receiverTel.length!=0)){
                    var dto={
                        userName:localStorage.getItem("userName"),
                        receiverName:this.address.receiverName,
                        receiverTel:this.address.receiverTel,
                        placeName:this.address.placeName
                    }
                    $.ajax({
                        url:"/addreceiveadress",
                        type:"post",
                        contentType : "application/json",              //发送至服务器的类型
                        dataType : "json",
                        data:JSON.stringify(dto),
                        async: false,//使用同步的方式,true为异步方式
                        success:function(data){
                            $(".mask").hide();
                            $("#addplace").hide();
                            window.location.reload()
                        },
                        fail:function(){
                            alert(error);
                        }
                    })
                }
            },
            close:function () {
                $(".mask").hide();
                $("#addplace").hide();
                window.location.reload()
            }
        }
    });
    //编辑地址
    var editdz = new Vue({
        el:"#editaddr",
        data:{
            address:[],
            place:[],
            addrid:0,
        },
        methods:{
            save:function () {
                this.address.placeName=$("select option:checked").text();
                var dto={
                    userName:localStorage.getItem("userName"),
                    receiveId:this.addrid,
                    receiverName:this.address.receiverName,
                    receiverTel:this.address.receiverTel,
                    placeName:this.address.placeName
                }
                if(this.address.receiverName==null||this.address.receiverName.length==0){
                    $("#addrname").show();
                }else {
                    $("#addrname").hide();
                }
                if(this.address.receiverTel==null||this.address.receiverTel.length==0){
                    $("#addrtel").show();
                }else{
                    $("#addrtel").hide();
                }
                if((this.address.receiverName!=null||this.address.receiverName.length!=0)&&
                    (this.address.receiverTel!=null||this.address.receiverTel.length!=0)) {
                    $.ajax({
                        url: "/editreceiveadress",
                        type: "post",
                        contentType: "application/json",              //发送至服务器的类型
                        dataType: "json",
                        data: JSON.stringify(dto),
                        async: false,//使用同步的方式,true为异步方式
                        success: function (data) {
                            $(".mask").hide();
                            $("#editaddr").hide();
                            window.location.reload()
                        },
                        fail: function () {
                            alert(error);
                        }
                    })
                }
            },
            close:function () {
                $(".mask").hide();
                $("#editaddr").hide();
                window.location.reload()
            }
        }
    });
</script>
</body>
</html>
